<template>
  <div>
    <div class="user">
      <div class="cardBox-l">
        <div class="header">
          About me
        </div>
        <div class="box">
          <div class="profile">
            <div class="img">
              <img src="@/assets/hot/3.png" alt="">
            </div>
            <div class="center b">Super Admin</div>
            <div class="center"> <i class="el-icon-location-information"></i> China Shaanxi </div>
          </div>
        </div>
      </div>
      <div class="cardBox-r">
        <div class="header">
          Personal introduction
        </div>
        <div class="box">
          <p>My name is Su Ran. I come from Baoji, Shaanxi. I like reading, coding and running. Writing articles is my greatest pleasure。</p>
          <p>The motto of my life is to never forget the person who dug the well when drinking water and never forget to help me when being brilliant。</p>
        </div>
      </div>
    </div>
    <!-- 联系方式 -->
    <div class="user-b">
      <div class="header">
        Personal label
      </div>
      <div class="box">
        <el-tag
          :key="tag"
          v-for="tag in dynamicTags"
          closable
          type="warning"
          :disable-transitions="false"
          @close="handleClose(tag)">
          {{tag}}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
      </div>
    </div>
    <!-- 联系方式 -->
    <div class="user-b">
      <div class="header">
        Contact information
      </div>
      <div class="box">
        <div class="phone">
          <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item label="用户名">苏冉</el-descriptions-item>
            <el-descriptions-item label="手机号">19999999999</el-descriptions-item>
            <el-descriptions-item label="居住地" :span="2">宝鸡市</el-descriptions-item>
            <el-descriptions-item label="备注">
              <el-tag size="small">学校</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="联系地址"> 陕西省咸阳市沣西新城陕西国际商贸学院</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
    <!-- 个人规划信息 -->
    <div class="user-b">
      <div class="header">
        Personal planning
      </div>
      <div class="box">
        <p>古人说：“凡事预则立，不预则废。”它告诉我们，只有在事先做了精心的准备和合理的筹划，将来才能够更好地达到目标。我喜欢的一句话是:我的人生我做主,我的命运我安排。</p>
        <h5>一、认识自我</h5>
        <p>1.个人性格</p>
        <p>我平时除了与我认识的人有较多的话外，在陌生人面前，尤其是在陌生的长辈面前，我一般是不会有太多的话语的，但并不是说我喜欢一个人独处，我喜欢的与值得信赖的人，相处很好的朋友分享我的事情，其实我我本人也是蛮与他人谈的来的，因为只要我想去与别人联系，或者别人与我交流，我都是比较容易与对方成为朋友的，所以在职业选择上我明白我本人适合做什么，对我而言，根据个人兴趣、爱好以及专业，我觉得我本人适合教师、文秘或者医生。</p>
        <p>2.职业兴趣</p>
        <p>我是一个相对来说不是很外向的女孩，因而我不是很喜欢过于外向的工作。所以，我喜欢比较稳定的工作，如教师，文秘、医生。当然，我也想尝试一些适合于我本人的其他方面的工作。总而言之，我会根据我本人的爱好、特长、专业以及以后我本人的发展方向与生活经历来选择我本人的道路。</p>
        <p>3.胜任能力</p>
        <p>我认为我本人待人真诚，具有一定的亲和力，这是我在很大的优势吧。我本人也比较勤奋好学，专业知识还算扎实，相信一定能做好本职工作。我个人的业余爱好很广泛，如篮球、钢琴、画画、书法等，我快乐我做主，我精彩的每一天使我更加热爱生活。至于我本人的劣势，我认为我本人要多锻炼胆量，多参加一些社交活动，尽量在大众面前畅所欲言，提高我本人的口头表达能力。</p>
        <p>4.职业价值观</p>
        <p>我不太看重名利与地位。我只想找一份适合我本人的工作，因为“适合的才是最好的”，更想通过努力充分发挥我本人的才华，尽快找到我本人的最佳职业定位，并实现我本人的人生价值。</p>
        <h5>二、自我分析小结</h5>
        <p>“世界上没有哪一个是废物，只是没有放对位置而已”。要找到一份适合我本人的工作，必先正确认识我本人，客观评价我本人优点与不足，并对我本人的职业生涯做出合理的规划，以期待我本人能够在未来有更大的发展。</p>
      </div>
    </div>
    <!-- 兴趣关系图 -->
    <div class="user-b">
      <div class="header">
        Interest Graph
      </div>
      <div class="box">
        <div id="boxCenter">

        </div>
      </div>
    </div>
    <!-- 技能分类 -->
    <div class="user-b">
      <div class="header">
        Skill classification
      </div>
      <div class="box">
        <div id="boxSkill">

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data(){
    return {
      dynamicTags: ['音乐', '美术', '舞蹈'],
      inputVisible: false,
      inputValue: ''
    }
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    // 兴趣
    getRelationship(){
      var chartDom = document.getElementById('boxCenter');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        legend: {
          top: 'bottom'
        },
        tooltip: {
          trigger: 'item'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            type: 'pie',
            radius: [30, 150],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 6
            },
            data: [
              { value: 45, name: '美术' },
              { value: 37, name: '音乐' },
              { value: 30, name: '舞蹈' },
              { value: 47, name: '朗读' },
              { value: 58, name: '演讲' },
              { value: 50, name: '工艺制作' }
            ]
          }
        ]
      };

      option && myChart.setOption(option);

    },
    // 技能
    getSkill(){
      var chartDom = document.getElementById('boxSkill');
      var myChart = echarts.init(chartDom);
      var option;
      const colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'];
      const bgColor = '#fff';
      const itemStyle = {
        star5: {
          color: colors[0]
        },
        star4: {
          color: colors[1]
        },
        star3: {
          color: colors[2]
        },
        star2: {
          color: colors[3]
        }
      };
      const data = [
        {
          name: '技能',
          itemStyle: {
            color: colors[1]
          },
          children: [
            {
              name: '能力分析',
              children: [
                {
                  name: '5☆',
                  children: [
                    {
                      name: '对环境的创造能力'
                    },
                    {
                      name: '组织引导能力'
                    }
                  ]
                },
                {
                  name: '4☆',
                  children: [
                    {
                      name: '激励评估能力'
                    },
                    {
                      name: '教学组织能力'
                    },
                    {
                      name: '教育能力'
                    },
                    {
                      name: '观察反思能力'
                    }
                  ]
                },
                {
                  name: '3☆',
                  children: [
                    {
                      name: '合理安排的能力'
                    }
                  ]
                }
              ]
            },
            {
              name: '证书',
              children: [
                {
                  name: '5☆',
                  children: [
                    {
                      name: '联合国儿童基金会证书'
                    },
                    {
                      name: '普通话证书'
                    },
                    {
                      name: '教师资格证'
                    }
                  ]
                }
              ]
            },
            {
              name: '技能',
              children: [
                {
                  name: '5☆',
                  children: [
                    {
                      name: '工艺制作'
                    },
                    {
                      name: '演讲'
                    },
                    {
                      name: '朗读'
                    }
                  ]
                },
                {
                  name: '4☆',
                  children: [
                    {
                      name: '美术'
                    },
                    {
                      name: '音乐'
                    }
                  ]
                },
                {
                  name: '2☆',
                  children: [
                    {
                      name: '舞蹈'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ];
      for (let j = 0; j < data.length; ++j) {
        let level1 = data[j].children;
        for (let i = 0; i < level1.length; ++i) {
          let block = level1[i].children;
          let bookScore = [];
          let bookScoreId;
          for (let star = 0; star < block.length; ++star) {
            let style = (function (name) {
              switch (name) {
                case '5☆':
                  bookScoreId = 0;
                  return itemStyle.star5;
                case '4☆':
                  bookScoreId = 1;
                  return itemStyle.star4;
                case '3☆':
                  bookScoreId = 2;
                  return itemStyle.star3;
                case '2☆':
                  bookScoreId = 3;
                  return itemStyle.star2;
              }
            })(block[star].name);
            block[star].label = {
              color: style.color,
              downplay: {
                opacity: 0.5
              }
            };
            if (block[star].children) {
              style = {
                opacity: 1,
                color: style.color
              };
              block[star].children.forEach(function (book) {
                book.value = 1;
                book.itemStyle = style;
                book.label = {
                  color: style.color
                };
                let value = 1;
                if (bookScoreId === 0 || bookScoreId === 3) {
                  value = 5;
                }
                if (bookScore[bookScoreId]) {
                  bookScore[bookScoreId].value += value;
                } else {
                  bookScore[bookScoreId] = {
                    color: colors[bookScoreId],
                    value: value
                  };
                }
              });
            }
          }
          level1[i].itemStyle = {
            color: data[j].itemStyle.color
          };
        }
      }
      option = {
        backgroundColor: bgColor,
        color: colors,
        series: [
          {
            type: 'sunburst',
            center: ['50%', '50%'],
            data: data,
            sort: function (a, b) {
              if (a.depth === 1) {
                return b.getValue() - a.getValue();
              } else {
                return a.dataIndex - b.dataIndex;
              }
            },
            label: {
              rotate: 'radial',
              color: bgColor
            },
            itemStyle: {
              borderColor: bgColor,
              borderWidth: 2
            },
            levels: [
              {},
              {
                r0: 0,
                r: 20,
                label: {
                  rotate: 0
                }
              },
              {
                r0: 20,
                r: 85
              },
              {
                r0: 95,
                r: 120,
                itemStyle: {
                  shadowBlur: 2,
                  shadowColor: colors[2],
                  color: 'transparent'
                },
                label: {
                  rotate: 'tangential',
                  fontSize: 10,
                  color: colors[0]
                }
              },
              {
                r0: 120,
                r: 125,
                label: {
                  position: 'outside',
                  textShadowColor: '#333'
                },
                downplay: {
                  label: {
                    opacity: 0.5
                  }
                }
              }
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    }
  },
  mounted(){
    this.getRelationship(),
    this.getSkill()
  }
}
</script>

<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.user {
  padding: 20px;
  display: flex;
  justify-content: space-evenly;
}

.user-b {
  width: 90%;
  height: auto;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  margin: 0 auto;
  margin-top: 15px;
  .header {
    padding: 18px 20px;
    font-weight: 700;
    border-bottom: 1px solid #e6ebf5;
  }
  .box {
    padding: 20px;
    height: auto;
    p {
      text-indent: 2em;
      color: #606266;
      font-size: 14px;
    }
    h5 {
      text-indent: 2em;
    }
    .phone {
      height: 200px;
    }
    #boxCenter {
      width: 70%;
      height: 400px;
      margin: 0 auto;
      canvas {
        width: 100%;
        height: 100%;
      }
    }
    #boxSkill {
      width: 70%;
      height: 500px;
      margin: 0 auto;
      canvas {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.cardBox-l {
  width: 30%;
  height: auto;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  .header {
    padding: 18px 20px;
    font-weight: 700;
    border-bottom: 1px solid #e6ebf5;
  }
  .box {
    padding: 20px;
    .profile {
      height: auto;
      .img {
        height: 100px;
        width: 100px;
        margin: 10px auto;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .center {
        text-align: center;
        
      }
      .b {
        font-weight: 700;
        margin-bottom: 10px;
      }
    }
  }
}
.cardBox-r {
  width: 60%;
  height: auto;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  .header {
    padding: 18px 20px;
    font-weight: 700;
    border-bottom: 1px solid #e6ebf5;
  }
  .box {
    padding: 20px;
    p {
      text-indent: 2em;
      color: #606266;
      font-size: 14px;
    }
  }
}
</style>